<template>
  <div class="rightTop flex-x">
    <div class="w50 flex-y flex-center center" ref="leftRoll">
      <el-progress
        type="circle"
        :width="isrollWidth"
        :show-text="false"
        :stroke-width="20"
        stroke-linecap="butt"
        :percentage="77"
        color="#984DFF"
      ></el-progress>
      <div class="roll_remark">累计能耗：422 kW·h</div>
    </div>
    <div class="w50 flex-y center">
      <div class="contentBox flex-y flex-space">
        <div class="content flex-x flex-space ">
          <div>接入设备(台)</div>
          <div>19</div>
        </div>
        <div class="content flex-x flex-space ">
          <div>在线设备(台)</div>
          <div>15</div>
        </div>
        <div class="content flex-x flex-space ">
          <div>闲置设备(台)</div>
          <div>4</div>
        </div>
        <div class="content flex-x flex-space ">
          <div>设备告警(条)</div>
          <div style="color:#FCB201">0</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      isrollWidth: 150
    };
  },
  mounted() {
    console.log("aaa", this.$refs.leftRoll.clientWidth);

    this.isrollWidth = this.$refs.leftRoll.clientWidth / 1.3;
    window.onresize = () => {
      return (() => {
        this.isrollWidth = this.$refs.leftRoll.clientWidth / 1.3;
        console.log("aaa", this.$refs.leftRoll.clientWidth);
      })();
    };
  }
};
</script>

<style lang="scss" scoped>
.rightTop {
  height: 90%;
  .w50 {
    width: 50%;
    height: 90%;
  }
  .center {
    text-align: center;
  }

  .roll_remark {
    margin-top: 15px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
  /deep/ .el-progress path:first-child {
    // 修改进度条背景色
    stroke: #091224;
  }
  /deep/ .el-progress__text {
    // 修改进度条文字提示颜色
    color: #bcdbe9;
  }
}
.contentBox {
  height: 80%;
  width: 88%;

  .content {
    padding-left: 20px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    line-height: 23%;
    width: 100%;
    height: 23%;
    background: url(../../../assets/images/test_content_bg.png) no-repeat 100%;
    background-size: cover;
    border-radius: 10px;
  }
}
</style>
